<!-- 编号通用组件 -->

<template>
  <div class="number-setting">
    <a-form :model="currForm" auto-label-width>
      <a-form-item label="编号方式：" required> </a-form-item>
      <a-form-item :label="`前序：`">
        <a-switch
          v-model="currForm.preStruct.isEnabled"
          :checked-value="1"
          :unchecked-value="2"
          disabled
        />
        <div
          :style="{
            marginLeft: '20px',
          }"
        >
          <span>描述：</span>
          <a-input
            :style="{ width: '220px' }"
            placeholder="请输入"
            v-model="currForm.preStruct.description"
          />
        </div>
        <!-- <div
          :style="{
            marginLeft: '20px',
          }"
        >
          <span>长度：</span>
          <a-input-number
            :min="1"
            :style="{ width: '200px' }"
            placeholder="请输入长度"
            allow-clear
            mode="button"
            v-model="currForm.preStruct.length"
          >
          </a-input-number>
        </div> -->
        <div
          :style="{
            marginLeft: '20px',
          }"
        >
          <span>前序名称：</span>
          <a-input
            :style="{ width: '200px' }"
            placeholder="请输入"
            allow-clear
            v-model="currForm.preStruct.name"
          >
          </a-input>
        </div>
        <!-- <div
          :style="{
            marginLeft: '20px',
          }"
        >
          <icon-plus-circle
            size="20"
            class="icon icon-plus"
            @click="addItem(index)"
          />
          <icon-minus-circle
            size="20"
            class="icon icon-minus"
            @click="delItem(index)"
            v-if="currForm.codeWays.length > 1"
          />
        </div> -->
      </a-form-item>

      <a-form-item label="时间戳：" required>
        <a-switch
          @change="() => {}"
          v-model="currForm.time.isEnabled"
          :checked-value="1"
          :unchecked-value="2"
        />
        <div
          :style="{
            marginLeft: '20px',
          }"
        >
          <a-input
            :style="{ width: 'auto' }"
            placeholder="请输入时间"
            v-model="currForm.time.content"
            disabled
          >
            <template #prefix>
              <a-select
                :style="{ width: '120px', marginRight: '10px' }"
                placeholder="请选择"
                @change="timeSelect"
                v-model="currForm.time.way"
                :disabled="currForm.time.isEnabled === 2"
              >
                <a-option :value="1">年</a-option>
                <a-option :value="2"> 年月</a-option>
                <a-option :value="3">年月日</a-option>
              </a-select>
            </template>
          </a-input>
        </div>
      </a-form-item>
      <a-form-item label="流水号：" required>
        <div>
          <span>长度：</span>
          <a-input-number
            :min="1"
            :style="{ width: '200px' }"
            placeholder="请输入长度"
            allow-clear
            mode="button"
            v-model="currForm.length"
            @change="serialNumberChange"
          >
          </a-input-number>
        </div>
        <div
          :style="{
            marginLeft: '20px',
          }"
        >
          <span>起始值：</span>
          <a-input
            disabled
            :style="{ width: '220px' }"
            placeholder="请输入"
            v-model="serialNumber"
          />
        </div>
      </a-form-item>
      <a-form-item label="分隔号：" required>
        <a-select
          :style="{ width: '160px', marginRight: '10px' }"
          placeholder="请选择"
          v-model="currForm.delimiter"
        >
          <a-option value="">无</a-option>
          <a-option value="-"> - </a-option>
          <a-option value="~"> ~ </a-option>
          <a-option value="."> . </a-option>
        </a-select>
      </a-form-item>
      <a-form-item label="编号预览：">
        <a-input
          disabled
          v-model="currForm.code"
          :style="{ width: '400px' }"
          placeholder="编号预览"
        />
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, computed, ref, watchEffect, onMounted } from 'vue';
  import { useRouter } from 'vue-router';
  import { cloneDeep } from 'lodash';
  import dayjs from 'dayjs';

  const router = useRouter();

  const props = withDefaults(
    defineProps<{
      form: any; // 表单数据
    }>(),
    {}
  );
  let currForm = ref<any>(); // 储存当前的表单
  let serialNumber = ref('1'); // 流水号起始值
  // const currForm = computed(() => cloneDeep(props.form));
  let currCode = ref(''); // 储存当前的编号
  currForm.value = cloneDeep(props.form);

  // 添加一项编号方式
  const addItem = (index: number) => {
    currForm.value.codeWays.splice(index + 1, 0, {
      description: '',
      length: 1,
      name: '',
      isEnabled: 2,
      fieldTypeId: 0,
      type: index + 1,
    });
  };

  // 删除一项编号方式
  const delItem = (index: number) => currForm.value.codeWays.splice(index, 1);

  // 获取时间戳格式
  // const timeSelect = (flag: any) => {
  //   const time = currForm.value.time;
  //   if (flag === 1) time.content = dayjs().format('YYYY');
  //   else if (flag === 2) time.content = dayjs().format('YYYYMM');
  //   else if (flag === 3) time.content = dayjs().format('YYYYMMDD');
  //   else time.content = dayjs().format('YYYYMMDDHHmmss');
  // };
  const timeSelect = (flag: any) => {
    const time = currForm.value.time;
    const format = {
      1: 'YYYY',
      2: 'YYYYMM',
      3: 'YYYYMMDD',
    };
    time.content = dayjs().format(`${format[flag]}`);
  };

  // 修改流水号起始值
  const serialNumberChange = (val: any) => {
    serialNumber.value = '1'; // 每次都初始化成1
    serialNumber.value = serialNumber.value.padStart(val, '0'); // 左边补零
  };
  // const serialNumberChange = (val: any) => {
  //   serialNumber.value = String(val).padStart(val.length, '0');
  // };

  watchEffect(() => {
    let code = ''; // 每次都初始化编号预览
    let codeWays = currForm.value.preStruct.name;
    let delimiter = currForm.value.delimiter;
    let time = currForm.value.time;
    let serialNumberS = serialNumber.value;
    code += `${codeWays}${delimiter}`;

    // 循环遍历编号方式
    // codeWays.forEach((way: any, index: number) => {
    //   if (way.isEnabled === 1) {
    //     if (index === 0 && delimiter !== '无') {
    //       code += `${way.description}${delimiter}`;
    //     } else {
    //       code += way.description;
    //     }
    //   }
    // });
    // 判断时间戳是否加上
    if (time.isEnabled === 1) code += time.content;
    if (currForm.value.length) serialNumberChange(currForm.value.length);
    code += serialNumber.value;
    currForm.value.code = code;
  });

  defineExpose({ currForm, serialNumber });
</script>

<style scoped lang="less">
  .number-setting {
    padding: 20px;

    .icon {
      cursor: pointer;
    }
    .icon-plus {
      color: #165dff;
      margin-right: 10px;
    }
    .icon-minus {
      color: red;
    }
    :deep(.arco-input-wrapper .arco-input[disabled]),
    :deep(.arco-select-view-single.arco-select-view-disabled) {
      -webkit-text-fill-color: #165dff;
    }
  }
</style>
